<template>
  <basic-container>
    <avue-crud :option="option" :data="data" v-model="form" ref="crud" @row-del="rowDel" @row-update="rowUpdate"
      :before-open="beforeOpen" @row-save="rowSave" @on-load="onLoad">
      <template slot-scope="{row}" slot="urlsForm">
        <el-upload class="upload-demo" action="#" :before-upload="beforeUpload" :before-remove="beforeRemove" :file-list="fileList"
          :on-preview="handlePreview" accept="image/jpeg,image/png" list-type="picture-card" multiple>
          <i class="el-icon-plus"></i>
        </el-upload>
      </template>
      <template slot-scope="{row}" slot="detailForm">
        <viewer :images="row.urls" style="z-index:99;">
          <img style="width:80px;height:80px;" v-for="(src,index) in row.urls" :src="src.url" :key="index">
        </viewer>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import request from '@/router/axios';

  export default {
    props: {
      isView: false,
      orderCode: "",
      organization: ""
    },
    data() {
      return {
        fileList: [],
        form: {
          files: '',
          urls: []
        },
        option: {
          size: "mini",
          border: true,
          addBtn: !this.isView,
          editBtn: !this.isView,
          delBtn: !this.isView,
          viewBtn: this.isView,
          refreshBtn: false,
          menuWidth: '130px',
          column: [{
              label: "二维码",
              prop: "barCode",
              type: "select",
              filterable: true,
              width: "150px",
              props: {
                label: "code",
                value: "code"
              },
              rules: [{
                required: true,
                trigger: "blur"
              }]
            },
            {
              label: "主要成份",
              prop: "ingredients",
              rules: [{
                required: true,
                trigger: "blur"
              }]
            },
            {
              label: "化学名称",
              prop: "chemistry"
            },
            {
              label: "危险情况",
              prop: "danger",
              hide: true
            },
            {
              label: "安全措施",
              prop: "safety",
              hide: true
            },
            {
              label: "危险类别",
              prop: "category"
            },
            {
              label: "出厂日期",
              prop: "leaveDate",
              type: "date",
              format: "yyyy-MM-dd",
              hide: true
            }, {
              label: "上传图片",
              span: 24,
              prop: "urls",
              hide: true,
              formslot: true,
              viewDisplay: !this.isView
            }, {
              label: "图片详情",
              prop: "detail",
              formslot: true,
              span: 24,
              hide: true,
              editDisplay: this.isView,
              addDisplay: this.isView
            }
          ]
        },
        data: []
      };
    },
    created() {
      request({
        url: '/api/WmsBarcode/getpages',
        method: 'get',
        params: {
          type: this.organization == undefined ? '' : this.organization,
          status: "1",
          limit: 0
        }
      }).then(res => {
        this.findObject(this.option.column,'barCode').dicData = res.data.data;
      });
    },
    methods: {
      handlePreview(file) {
        window.open(file.url);
      },
      beforeRemove(e) {
        const id = e.url.substring(e.url.lastIndexOf('/') + 1, e.url.lastIndexOf('.'))
        request({
          url: '/api/files/remove',
          method: 'post',
          params: {
            ids: id
          }
        });
      },
      beforeUpload(file) {
        var fd = new window.FormData();
        fd.append('file', file, file.name);
        request({
          url: '/api/files/upload',
          method: 'post',
          data: fd
        }).then(res => {
          const data = res.data.data;
          this.fileList.push(data);
          if (this.form.files == undefined)
            this.form.files = data.id;
          else
            this.form.files += ',' + data.id;
        });
        return false;
      },
      beforeOpen(done, type) {
        this.fileList=[];
        if (["edit", "view"].includes(type)) {
          request({
            url: '/api/WmsOrderDetail/detail',
            method: 'get',
            params: {
              id: this.form.id
            }
          }).then(res => {
            const data = res.data.data;
            this.form = data;
            this.fileList = data.urls;
          });
        }
        done();
      },
      rowSave(row, loading, done) {
        if (this.orderCode != undefined) {
          row.orderCode = this.orderCode;
        }
        request({
          url: '/api/WmsOrderDetail/add',
          method: 'post',
          data: row
        }).then(() => {
          loading();
          this.onLoad(this.page);
          done();
        });
      },
      rowUpdate(row, index, loading, done) {
        return request({
          url: '/api/WmsOrderDetail/edit',
          method: 'post',
          data: row
        }).then(() => {
          loading();
          this.onLoad(this.page);
          done();
        });
      },
      rowDel(row) {
        this.$confirm("确定数据删除?")
          .then(() => {
            return request({
              url: '/api/WmsOrderDetail/remove',
              method: 'post',
              params: {
                ids: row.id
              }
            });
          })
          .then(() => {
            this.onLoad(this.page);
          });
      },
      onLoad() {
        if (this.orderCode != undefined) {
          request({
            url: '/api/WmsOrderDetail/getpages',
            method: 'get',
            params: {
              type: this.orderCode,
              limit: 0
            }
          }).then(res => {
            const data = res.data
            this.data = data.data;
            this.$emit('closeMoule', this.data);
          });
        }
      }
    }
  };
</script>

<style>
</style>
